import React, { useState } from "react";
import { companyTypes, modalPropsType } from "@/constants/types";
import { Modal, Form, Input, InputNumber } from "antd";
import XlSelect from "@/components/Form/XlSelect";
import XlUpload from "@/components/Form/XlUpload";
import { useComponentDidMount } from "@/hooks";
import { fetchCustomerOptions } from "@/pages/OrderManage/services";
import { useModel } from "@umijs/max";

const {Item} = Form;
const labelCol = {span: 5};
const rules = [{required: true}]

const AccountFundAdd = ({title, onCancel, onSubmit, visible, loading}: modalPropsType) => {
  const [form] = Form.useForm();
  const [companyList, setCompanyList] = useState<companyTypes []>([]);
  const { getDict } = useModel("dictModel");
  const accChangeTypes = getDict("accChangeType");

  const handleSubmit =async () => {
    const res = await form.validateFields();
    onSubmit({
      ...res,
      customerName: companyList?.find((v: companyTypes) => v?.value === res?.customerCode)?.label,
      memoPath: res?.memoPath?.[0]?.responseUrl
    });
  }

  useComponentDidMount(() => {
    fetchCustomerOptions({customerName: ""}).then(
      res => {
        setCompanyList((res || []).map((v: any) => ({
          ...v,
          label: v?.nickName,
          value: v?.code
        })));
      }
    )
  });

  return (
    <Modal
      open={visible}
      onCancel={onCancel}
      maskClosable={false}
      title={title}
      onOk={handleSubmit}
      width="600px"
      confirmLoading={loading}
    >
      <Form form={form} className="modal-form-padding" labelCol={labelCol}>
        <Item label="公司简称" name="customerCode" rules={rules}>
          <XlSelect allowClear showSearch optionFilterProp="label" options={companyList} />
        </Item>
        <Item label="资金/元" name="amount" rules={rules}>
          <InputNumber min={0} style={{width: 437}} />
        </Item>
        <Item label="业务类型" name="category" rules={rules}>
          <XlSelect options={accChangeTypes} />
        </Item>
        <Item label="备注" name="remark" rules={rules}>
          <Input.TextArea rows={3} />
        </Item>
        <Item label="财务付款凭证" name="memoPath" rules={rules}>
          <XlUpload uploadParams={{businessCode: "payment_file"}} />
        </Item>
      </Form>
    </Modal>
  );
}
export default AccountFundAdd;